<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        ul li {
            list-style: none;
        }

        .bigbox {
            width: 1040px;
            height: 600px;
            /* background-color: beige; */
            margin: 100px auto;
            overflow: hidden;
        }

        img {
            width: 200px;
            height: 150px;
        }

        p {
            margin-top: 10px;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        ul li {
            margin-left: 5px;
            margin-top: 40px;
            float: left;
            width: 200px;
            height: 200px;
        }
    </style>


</head>

<body>
    <div id="app">
        <ul class="bigbox">
            <li v-for='(item,index) in mockData' key:item.id >
                <img :src="item.img" alt="">
                <p>{{item.text}}</p>
                <p>￥{{item.price}}</p>
            </li>

        </ul>

    </div>

    <script src="./js/vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                mockData: [
                {
                        "id": 1,
                        "img": "https://img12.360buyimg.com/jdcms/s300x300_jfs/t1/164708/20/20875/95398/6086e7daE5d1ea589/2248e82326846870.jpg.webp",
                        "text": "兰叶源  轻奢莫兰迪真绒布绢假塑料白玫瑰浆果花把束艺卉餐桌花瓶摆件 浅蓝色 两套更优惠",
                        "price": 266
                    },
                    {
                        "id": 2,
                        "img": "https://img12.360buyimg.com/jdcms/s300x300_jfs/t1/164708/20/20875/95398/6086e7daE5d1ea589/2248e82326846870.jpg.webp",
                        "text": "兰叶源  轻奢莫兰迪真绒布绢假塑料白玫瑰浆果花把束艺卉餐桌花瓶摆件 浅蓝色 两套更优惠",
                        "price": 266
                    },
                    {
                        "id": 3,
                        "img": "https://img12.360buyimg.com/jdcms/s300x300_jfs/t1/156232/40/12942/112817/6041ced3Ef7f383b3/7e29e51c25f7b77e.jpg.webp",
                        "text": "<i class=\"more2_info_self\">自营</i>都市丽人文胸无钢圈聚拢中薄款蜂巢杯透气美背小花心波斯菊蕾丝胸罩内衣女2B9506 浅肤32/70A杯",
                        "price": 98
                    },
                    {
                        "id": 4,
                        "img": "https://img12.360buyimg.com/jdcms/s300x300_jfs/t1/176546/26/4766/230854/607aa012E97def171/7417547d2d2e5da3.jpg.webp",
                        "text": "兰叶源  创意中式陶瓷仕女香插香座插香器线香室内檀香家用线香薰炉摆件 小宫娥 坐  哑光",
                        "price": 166
                    },
                    {
                        "id": 5,
                        "img": "https://img12.360buyimg.com/jdcms/s300x300_jfs/t1/119997/6/15535/123334/5f8d237bE36364127/a4d5ee3e0209d2a0.jpg.webp",
                        "text": "<i class=\"more2_info_chosen\"></i>得力（deli）4905 电脑椅 家用办公椅 转椅人体工学网布椅子 时尚升降座椅",
                        "price": 459
                    },
                    {
                        "id": 6,
                        "img": "https://img11.360buyimg.com/jdcms/s300x300_jfs/t1/158542/28/20137/213892/607aa011Ef99cf77f/ee308525809e7d32.jpg.webp",
                        "text": "兰叶源  创意简约现代手工陶瓷人物家居小摆件客厅办公室书房工艺品装饰品 小胖",
                        "price": 96
                    },
                    {
                        "id": 7,
                        "img": "https://img14.360buyimg.com/jdcms/s300x300_jfs/t1/184019/38/1640/74927/608bce5aEcbe6dfa2/7649c02195797afa.jpg.webp",
                        "text": "<i class=\"more2_info_self\">自营</i>浪琴(Longines)瑞士手表 嘉岚系列 石英钢带女表 L42091917",
                        "price": 9800
                    },
                    {
                        "id": 8,
                        "img": "https://img13.360buyimg.com/jdcms/s300x300_jfs/t1/161897/28/19295/153357/607aa1caEd6d31b06/470d5052656bbc5e.jpg.webp",
                        "text": "兰叶源  木雕福猪摆件生肖猪一对客厅玄关电视柜家居装饰乔迁创意礼品 小号木福猪一只(长18厘米)",
                        "price": 726
                    },
                    {
                        "id": 9,
                        "img": "https://img13.360buyimg.com/jdcms/s300x300_jfs/t1/149094/12/15569/191462/5fbcb4d4Eca6c430b/29df94b426525dd7.jpg.webp",
                        "text": "木马人 鞋架子多层简易落地卧室客厅鞋柜宿舍实木小鞋凳门口防尘家用门后经济型换鞋凳楠竹收纳置物架 【全板密封】七层102长（加宽深度）",
                        "price": 149
                    },
                    {
                        "id": 10,
                        "img": "https://img30.360buyimg.com/jdcms/s300x300_jfs/t1/174624/5/4907/80122/607aa012Eef5409a8/a8f6e04aeee6441e.jpg.webp",
                        "text": "兰叶源  中式禅意陶瓷香炉线香插香座和尚客厅居室佛堂檀香香熏炉创意摆件 花开见佛  哑光 白",
                        "price": 286
                    },
                ]
            },







        })


    </script>
</body>

</html>